<template>
  <div class="app-container">
    <!-- 基本信息 -->
      <div class="ci" v-show="currentView==1">
          <div class="item">
            <span class="name">机构名称</span>
            <span class="value">{{shop.ShopName}}</span>
          </div>
          <div class="item">
            <span class="name">Logo</span>
            <span class="value">
              <!-- <img style="width: 45px; height: 40px" :src="shop.ShopLogo"  @click="showLargeImage()" /> -->
              <el-image  style="width: 45px; height: 45px" :src="shop.ShopLogo"  :preview-src-list="shop.ShopLogoPreviews">
              </el-image>
            </span>
          </div>
          <div class="item">
            <span class="name">联系电话</span>
            <span class="value">{{shop.ShopPhone}}</span>
          </div>
          <div class="item h100">
            <span class="name">展示图片</span>
            <span class="value pics">
               <!-- <draggable
                :list="shop.ShopPictrues"
                v-bind="$attrs"
                class="board-column-content"
                :set-data="setData"
              > -->
                <div class="pic" v-for="(item,index) in shop.ShopPictrues" :key="index">
                 <el-image  style="width: 90px; height: 90px" :src="item"  :preview-src-list="shop.ShopPictruesPreviews">
                </el-image>
               </div>
              <!-- </draggable> -->
            </span>
             <!-- <el-upload style="width:90px;height:90px"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog> -->
          </div>
          <div class="item">
            <span class="name">简介</span>
            <span class="value">{{shop.Introduce}}</span>
          </div>
          <div class="item">
            <span class="name">地址</span>
            <span class="value">{{shop.Address}}</span>
          </div>
          <div class="item">
            <span class="name">位置坐标</span>
            <span class="value">{{shop.GeoLocation}}</span>
          </div>
          
      </div>
    <!-- end 基本信息 -->
    <!-- 修改基本信息 -->
      <div class="ci" v-show="currentView==3">
          <div class="item">
            <span class="name">机构名称</span>
            <span class="value">{{shop.ShopName}}</span>
          </div>
          <div class="item h100">
            <span class="name">Logo</span>
            <span class="value pics">
                <div class="pic opt">
                  <!-- <img :src="shopModify.ShopLogo" width="80" height="80" @load="previewUploadLogo($event)" />
                  <div class="el-loading-spinner" v-show="upload.logo.previewing"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div> -->
                  <bx-image :src="shopModify.ShopLogo" :width="80" :height="80" :loading="upload.logo.previewing"  @load-complete="previewUploadLogo"></bx-image>
                </div>
                <div class="upload-box" @click="clickUploadLogoFile()">
                   <i class="el-icon-plus avatar-uploader-icon"></i>
                   <input ref="selectfileForLogo" type="file" style="display:none;" @change="selectFileLogo($event)" />
                </div>
            </span>
          </div>
          <div class="item" v-show="upload.logo.running">
              <el-progress :text-inside="true" :stroke-width="24" :percentage="upload.logo.percent" style="width:100%" ></el-progress>
          </div>
          <div class="item">
            <span class="name">联系电话</span>
            <span class="value"><el-input  placeholder="联系电话" v-model="shopModify.ShopPhone" style="width:220px"></el-input></span>
          </div>
          <div class="item h100">
            <span class="name">展示图片</span>
            <span class="value pics publicitypic">
              <draggable
                :list="shop.ShopPictrues"
                v-bind="$attrs"
                class="board-column-content"
                :set-data="setData"
              >
                <div class="pic" v-for="(item,index) in shopModify.ShopPictrues" :key="index">
                  <bx-image :src="item" :width="80" :height="80" :show-delete="true" :index="index" @delete-handler="shoppicDeleteHandle"></bx-image>
                 <!-- <el-image  style="width: 90px; height: 90px" :src="item"  :preview-src-list="shop.ShopPictruesPreviews">
                </el-image> -->
               </div>
               
              </draggable> 
              <div class="upload-box" @click="clickUploadShopFile()">
                   <i class="el-icon-plus avatar-uploader-icon"></i>
                   <input ref="selectfileForShop" type="file" style="display:none;" @change="selectFileShop($event)" />
                </div>
            </span>
             
          </div>
          <div class="item h100">
            <span class="name">简介</span>
            <span class="value">
              <el-input
                type="textarea"
                placeholder="请输入简介"
                v-model="shopModify.Introduce"
                maxlength="1000"
                rows="4" 
                show-word-limit
              ></el-input>
              </span>
          </div>
          <!-- <div class="item">
            <span class="name">地址</span>
            <span class="value">
              <el-input
                type="text"
                placeholder="请输入地址"
                v-model="shopModify.Address"
                maxlength="200"
                show-word-limit
              ></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name">位置坐标</span>
            <span class="value">
                经度：<el-input  placeholder="经度" v-model="shop.Longitude" style="width:100px"></el-input>
                <div style="width:20px;"></div>纬度：<el-input  placeholder="纬度" v-model="shop.Latitude" style="width:100px"></el-input>
            </span>
          </div> -->
          
      </div>
    <!-- end 修改基本信息 -->

    <!-- 私密信息 -->
    <div class="ci"  v-show="currentView==2">
        <div class="item">
            <span class="name">营业执照号</span>
            <span class="value">{{shop.BusLicenseNum}}</span>
          </div>
        <div class="item">
            <span class="name">营业执照图</span>
            <span class="value">
              <el-image  style="width: 45px; height: 40px" :src="shop.BusLicenseImg"  :preview-src-list="shop.BusLicenseImgPreviews">
                </el-image>
            </span>
          </div>
        <div class="item">
          <span class="name">法人姓名</span>
          <span class="value">{{shop.LegalName}}</span>
        </div>
        <div class="item">
          <span class="name">法人身份证号</span>
          <span class="value">{{shop.IdCardNum}}</span>
        </div>
        <div class="item h100">
          <span class="name">法人身份证图</span>
          <span class="value">
            <div class="pic" v-for="(item,index) in shop.LegaIdCardImgs" :key="index">
                 <el-image  style="width: 90px; height: 90px" :src="item"  :preview-src-list="shop.LegaIdCardImgsPreviews">
                </el-image>
               </div>
          </span>
        </div>
        <div class="item">
          <span class="name">支付宝账号（用于提现）</span>
          <span class="value">{{shop.AliPayAccount}}</span>
        </div>
    </div>
    <!-- end 私密信息 -->

    <!-- button -->
    <div class="ci" v-show="currentView<3">
      <div class="item btns">
          <span class="name"></span>
        <span class="value">
          <el-button type="primary" @click="modifyBaseInfo()">修改基础信息</el-button>
          <el-button type="primary" @click="viewPage()">{{viewBtnText}}</el-button>
        </span>
      </div>
    </div>
    <div class="ci" v-show="currentView==3">
      <div class="item btns">
          <span class="name"></span>
        <span class="value">
          <el-button type="primary" @click="saveBaseInfo()">保存</el-button>
          <el-button type="info" @click="viewPage()">返回</el-button>
        </span>
      </div>
    </div>
    <!-- end button -->
  </div>
</template>

<script>

import draggable from 'vuedraggable'
import * as shopApi from '@/api/shop'
import * as uploadApi from '@/api/upload'
import * as imageHelper from '@/utils/image'
import guid from '@/utils/guid'
import * as auth from '@/utils/auth'
//import * as qiniu from 'qiniu-js'
import BxImage from '@/components/BxImage'
import * as fileUpload from '@/utils/fileupload'

export default {
  name: 'InfomationShop',
  components: {
    draggable,
    BxImage
  },
  data(){
    return{
      currentView:1,
      viewBtnText:'查看私密信息',
      shop:{
        ID:'',
        ShopName:'',
        ShopLogo:'',
        ShopPhone:'',
        ShopLogoPreviews:null, //注意，这个初始必须为null
        ShopPictrues:null,
        ShopPictruesPreviews:null,
        Introduce:'',
        Address:'',
        GeoLocation:'',
        Longitude:'',
        Latitude:'',

        //私密信息
        AliPayAccount:'',
        BusLicenseNum:'',
        BusLicenseImg:'',
        BusLicenseImgPreviews:null,
        LegalName:'',
        LegaIdCardImgs:null,
        LegaIdCardImgsPreviews:null,
        idCardNum:'',
      },
      shopModify:{
        ID:'',
        ShopLogo:'',
        ShopLogoOrigin:'',
        ShopPhone:'',
        ShopPictrues:[],
        ShopPictruesOrigin:[],
        Introduce:'',
        Address:''
      },
      upload:{
        token:'',
        logo:{
          running:false,
          percent:0,
          state:0,
          previewing:false
        },
        //宣传图片
        publicitypic:{
          running:false,
          percent:0,
          state:0,
          previewing:false
        },
        
        
      }
    }
  },
  mounted(){
    var token=auth.getToken();
    //加载机构信息
    shopApi.getShopInfo({}).then((res)=>{
        this.shop.ID=res.data.id;
        this.shop.ShopName=res.data.shopName;
        this.shop.ShopLogo=imageHelper.GetFullUrl(res.data.shopLogo,200,200);
        this.shop.ShopLogoOrigin=res.data.shopLogo;
        this.shop.ShopLogoPreviews=[imageHelper.GetFullUrl(res.data.shopLogo,700,700)];
        this.shop.ShopPhone=res.data.shopPhone;
        //机构展示图片
        this.shop.ShopPictrues=[];
        this.shop.ShopPictruesPreviews=[];
        this.shop.ShopPictruesOrigin=[];
        if(res.data.mainImg1){
          this.shop.ShopPictrues.push(imageHelper.GetFullUrl(res.data.mainImg1,200,200));
          this.shop.ShopPictruesPreviews.push(imageHelper.GetFullUrl(res.data.mainImg1,0,0));
          this.shop.ShopPictruesOrigin.push(res.data.mainImg1);
        }
        if(res.data.mainImg2){
          this.shop.ShopPictrues.push(imageHelper.GetFullUrl(res.data.mainImg2,200,200));
          this.shop.ShopPictruesPreviews.push(imageHelper.GetFullUrl(res.data.mainImg2,0,0));
          this.shop.ShopPictruesOrigin.push(res.data.mainImg2);
        }
        if(res.data.mainImg3){
          this.shop.ShopPictrues.push(imageHelper.GetFullUrl(res.data.mainImg3,200,200));
          this.shop.ShopPictruesPreviews.push(imageHelper.GetFullUrl(res.data.mainImg3,0,0));
          this.shop.ShopPictruesOrigin.push(res.data.mainImg3);
        }
        //简介
        this.shop.Introduce=res.data.introduce;
        this.shop.Address=res.data.Address;
        this.shop.Longitude=res.data.Longitude;
        this.shop.Latitude=res.data.Latitude;
        this.shop.GeoLocation=((res.data.Longitude || '')+","+ (res.data.Latitude || ''));
        if(this.shop.GeoLocation.length==1){this.shop.GeoLocation="";}

        //私密信息
        //支付宝
        this.shop.AliPayAccount=res.data.aliPayAccount;
        //营业执照
        this.shop.BusLicenseNum=res.data.busLicenseNum;
        imageHelper.GetPrivateUrl(res.data.busLicenseImg,700,700,token).then(res=>{
          this.shop.BusLicenseImg=res.data;
          this.shop.BusLicenseImgPreviews=[res.data];
        });
        

        //法人信息
        this.shop.LegalName=res.data.legalName;
        this.shop.LegaIdCardImgs=[];
        this.shop.LegaIdCardImgsPreviews=[];
        if(res.data.legaIdCardImg){
          imageHelper.GetPrivateUrl(res.data.legaIdCardImg,700,700,token).then(res=>{
            this.shop.LegaIdCardImgs.push(res.data);
            this.shop.LegaIdCardImgsPreviews.push(res.data);
          });
          
        }
        if(res.data.legaIdCardImgbak){
          imageHelper.GetPrivateUrl(res.data.legaIdCardImg,700,700,token).then(res=>{
            this.shop.LegaIdCardImgs.push(res.data);
            this.shop.LegaIdCardImgsPreviews.push(res.data);
          });
        }
        //身份证号
        this.shop.IdCardNum=res.data.idCardNum;

        //修改信息初始值
        for(var key in this.shopModify){
          if(this.shopModify.hasOwnProperty(key)){
            this.shopModify[key]=this.shop[key];
          }
        }


        

    });

    //加载上传token
    uploadApi.GetUploadToken(1).then(res=>{
        this.upload.token=res.data.token;
    });
  },
  methods: {
   
    modifyBaseInfo() {
       this.currentView=3;
    },
    viewPage() {
       if(this.currentView==1){
          this.currentView=2;
          this.viewBtnText="查看基本信息";
       }else if(this.currentView==2){
         this.currentView=1;
         this.viewBtnText="查看私密信息";
       }else if(this.currentView==3){
         this.currentView=1;
         this.viewBtnText="查看私密信息";
       }
    },
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '')
    },

    //选择logo图片
    clickUploadLogoFile(){
      if(this.upload.logo.running){
        this.$message({
          message: '当前正在上传中',
          type: 'warning'
        });
        return;
      }
      this.$refs.selectfileForLogo.dispatchEvent(new MouseEvent('click'))
    },
    //上传图片
    selectFileLogo($event){
      var that=this;
      var token=this.upload.token;
      var key=guid.createGuid().replace(/-/g,'')+".jpg";

       var files=$event.target.files;
       if(files.length==0){return;}
      //  const options = {
      //     quality: 0.92,
      //     noCompressIfLarger: true
      //     // maxWidth: 1000,
      //     // maxHeight: 618
      //   }
        that.upload.logo.running=true;
        that.upload.logo.percent=0;

      //进度条提示
      let itv=setInterval(()=>{
        if(that.upload.logo.percent>85){clearInterval(itv);return;}
        that.upload.logo.percent+=5;
      },300)

      fileUpload.uploadQiniu({
          file:files[0],
          token:token,
          key:key,
          process:function(percert){
            console.log('正在上传...'+percert.toFixed(2)+'%');
          }
       }).then(completeres=>{
          console.log("上传成功",completeres);
          that.upload.logo.state=2;
          that.upload.logo.running=false;
          that.shopModify.ShopLogo=imageHelper.GetFullUrl(completeres.key,200,200);
          that.shopModify.ShopLogoOrigin=completeres.key;
          that.upload.logo.state=1;
          that.upload.logo.previewing=true;
          that.upload.logo.percent=100;
          clearInterval(itv);
          setTimeout(function(){
              that.upload.logo.running=false;
            },1000)
       }).catch(err=>{
         clearInterval(itv);
         that.upload.logo.running=false;
          that.$message({
            message: err,
            type: 'danger'
          });
       })

      // qiniu.compressImage(files[0], options).then(data => {
      //   const observable = qiniu.upload(data.dist, key, token, null, null);
      //   const subscription = observable.subscribe(
      //     function(nextres){
      //       console.log("next:",nextres);
      //       that.upload.logo.percent=nextres.percent;
      //     },function(errorres){
      //         console.log("error:",errorres);
      //         that.upload.logo.state=2;
      //         that.upload.logo.running=false;
      //         clearInterval(itv);
      //     },function(completeres){
      //         console.log("complete:",completeres);
      //         that.shopModify.ShopLogo=imageHelper.GetFullUrl(completeres.key,200,200);
      //         that.shopModify.ShopLogoOrigin=completeres.key;
      //         that.upload.logo.state=1;
      //         that.upload.logo.previewing=true;
      //         that.upload.logo.percent=100;
      //         clearInterval(itv);
      //         setTimeout(function(){
      //           that.upload.logo.running=false;
      //         },3000)
      //     }
      //   );
      // })
    },
    //预览图片加载完成
    previewUploadLogo(result){
      console.log("previewUploadLogo")
      this.upload.logo.previewing=false;
    },

    //上传店铺宣传图片
    clickUploadShopFile(){
      var check=this.shopModify.ShopPictrues.filter(function(item){return item!=''});
      if(check.length==3){ 
        this.$message({
          message: '请先移除要替换的图片',
          type: 'warning'
        });
        return;
      }
      if(this.upload.publicitypic.running){
        this.$message({
          message: '当前正在上传中',
          type: 'warning'
        });
        return;
      }
      this.$refs.selectfileForShop.dispatchEvent(new MouseEvent('click'))
    },
    selectFileShop($event){
      var that=this;
      var token=this.upload.token;
      var key=guid.createGuid().replace(/-/g,'')+".jpg";

       var files=$event.target.files;
       if(files.length==0){return;}
       that.upload.publicitypic.running=true;
        that.upload.publicitypic.percent=0;


      //进度条提示
      let itv=setInterval(()=>{
        if(that.upload.publicitypic.percent>85){clearInterval(itv);return;}
        that.upload.publicitypic.percent+=5;
      },300);

    fileUpload.uploadQiniu({
          file:files[0],
          token:token,
          key:key,
          process:function(percert){
            console.log('正在上传...'+percert.toFixed(2)+'%');
          }
       }).then(completeres=>{
          console.log("上传成功",completeres);
          that.upload.publicitypic.state=2;
          that.upload.publicitypic.running=false;
          for(var i=0;i<that.shopModify.ShopPictrues.length;i++){
            if(!that.shopModify.ShopPictrues[i]){
              //that.shopModify.ShopPictrues[i]=image.GetFullUrl(completeres.key,200,200);
              //数组改变只能用这种方式
              that.$set(that.shopModify.ShopPictrues,i, imageHelper.GetFullUrl(completeres.key,200,200));
              that.$set(that.shopModify.ShopPictruesOrigin,i, completeres.key);
              break;
            }
          }
          that.upload.publicitypic.state=1;
          that.upload.publicitypic.previewing=true;
          that.upload.publicitypic.percent=100;
          setTimeout(function(){
              that.upload.publicitypic.running=false;
            },1000)
       }).catch(err=>{
         that.upload.publicitypic.running=false;
          that.$message({
            message: err,
            type: 'danger'
          });
       })

      // qiniu.compressImage(files[0], options).then(data => {
      //   const observable = qiniu.upload(data.dist, key, token, null, null);
      //   const subscription = observable.subscribe(
      //     function(nextres){
      //       console.log("next:",nextres);
      //       that.upload.publicitypic.percent=nextres.percent;
      //     },function(errorres){
      //         console.log("error:",errorres);
      //         that.upload.publicitypic.state=2;
      //         that.upload.publicitypic.running=false;
      //         clearInterval(itv);
      //     },function(completeres){
      //         console.log("complete:",completeres);
      //         for(var i=0;i<that.shopModify.ShopPictrues.length;i++){
      //           if(!that.shopModify.ShopPictrues[i]){
      //             //that.shopModify.ShopPictrues[i]=image.GetFullUrl(completeres.key,200,200);
      //             //数组改变只能用这种方式
      //             that.$set(that.shopModify.ShopPictrues,i, imageHelper.GetFullUrl(completeres.key,200,200));
      //             that.$set(that.shopModify.ShopPictruesOrigin,i, completeres.key);
      //           }
      //         }
      //         that.upload.publicitypic.state=1;
      //         that.upload.publicitypic.previewing=true;
      //         that.upload.publicitypic.percent=100;
      //         clearInterval(itv);
      //         setTimeout(function(){
      //           that.upload.publicitypic.running=false;
      //         },3000)
      //     }
      //   );
      // })
    },
    //
    shoppicDeleteHandle(index){
       //this.shopModify.ShopPictrues[index]='';
       this.$set(this.shopModify.ShopPictrues,index, '')
       console.log("shoppicDeleteHandle index:",index);
       setTimeout(()=>{
         console.log(this.shopModify.ShopPictrues)
       })
    },
    
    //保存修改基础数据
    saveBaseInfo(){
      var data={
        "id": this.shopModify.ID,
        "introduce": this.shopModify.Introduce,
        "shopLogo": this.shopModify.ShopLogoOrigin,
        "shopPhone": this.shopModify.ShopPhone,
        "mainImg1": this.shopModify.ShopPictruesOrigin[0],
        "mainImg2": this.shopModify.ShopPictruesOrigin[1],
        "mainImg3": this.shopModify.ShopPictruesOrigin[2]
      }
       shopApi.saveBaseShopInfo(data).then(res=>{
          this.$message({
            message: '保存成功！',
            type: 'success'
          });
       })
    }
  }
}
</script>
<style scoped>
   /**特殊列 */
  .publicitypic>.board-column-content{ width:270px !important;}
</style>
